import React from 'react';
import { Modal, Button, TreeSelect, Form, Icon, Input, Checkbox, Select } from 'antd';
const { Option, OptGroup } = Select;
const FormItem = Form.Item;

const treeData = [{
  label: 'Node1',
  value: '0-0',
  key: '0-0',
  children: [{
    label: 'Child Node1',
    value: '0-0-0',
    key: '0-0-0',
  }],
}, {
  label: 'Node2',
  value: '0-1',
  key: '0-1',
  children: [{
    label: 'Child Node3',
    value: '0-1-0',
    key: '0-1-0',
  }, {
    label: 'Child Node4',
    value: '0-1-1',
    key: '0-1-1',
  }, {
    label: 'Child Node5',
    value: '0-1-2',
    key: '0-1-2',
  }],
}];

function handleChange(value) {
  console.log(`selected ${value}`);
}

class ModalTest extends React.Component {
  state = { visible: false }
  showModal = () => {
    this.setState({
      visible: true,
    });
  }
  handleOk = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  }
  handleCancel = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  }
  state = {
    value: ['0-0-0'],
  }
  onChange = (value) => {
    console.log('onChange ', value, arguments);
    this.setState({ value });
  }
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  }
  render() {
    const SHOW_PARENT = TreeSelect.SHOW_PARENT;
    const tProps = {
      treeData,
      value: this.state.value,
      onChange: this.onChange,
      treeCheckable: true,
      treeDefaultExpandAll: true,
      showCheckedStrategy: TreeSelect.SHOW_PARENT,
      searchPlaceholder: '',
      dropdownStyle: { height: 400 },
      style: {
        width: 300,
      },
    };
    const { getFieldDecorator } = this.props.form;
    return (
      <div>
        <Button type="primary" onClick={this.showModal}>Open</Button>
        <Modal
          title="Basic Modal"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <Form onSubmit={this.handleSubmit} className="login-form">
            <FormItem>
              <FormItem label="地域">
                {getFieldDecorator('selectedRightCityList', {
                  initialValue: [],
                  rules: [{ required: true, message: '请选择地域' }],
                })(<TreeSelect {...tProps} />)}
              </FormItem>
            </FormItem>
          </Form>
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
          <Select
            defaultValue="lucy"
            style={{ width: 200 }}
            onChange={handleChange}
          >
            <OptGroup label="Manager">
              <Option value="jack">Jack</Option>
              <Option value="lucy">Lucy</Option>
            </OptGroup>
            <OptGroup label="Engineer">
              <Option value="Yiminghe">yiminghe</Option>
            </OptGroup>
          </Select>
        </Modal>
      </div>
    );
  }
}

export default Form.create()(ModalTest);
